require(['config'], () => {
    require(['jquery', 'swiper', 'template', 'loadHF','jquery.cookie','jquery.fly'], ($, Swiper, template) => {// 一、选项卡切换
        
        console.log($.cookie);
        // 一、切换按钮
        $('.tabs>li').on('click',function(){
            $(this).addClass('active').siblings().removeClass('active')
        })

        // 二、轮播图
        new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项/
            effect : 'cube',
            autoplay: true,
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
            el: '.swiper-scrollbar',
            },
            autoplay: {
                delay: 1000,//1秒切换一次
                disableOnInteraction: false
              },
        })

        //三、页面数据渲染
        $.getJSON('http://www.xiongmaoyouxuan.com/api/tab/1?',resData=>{
            // console.log(resData);
            const products = resData.data.items.list
            console.log(products);
            const html = template('list',{products:products})
            $('.list>ul').append(html)
            
        })
        
        var index =0
        // 四、点击进行页面渲染
        $('.tabs>li:nth-child(2)').on('click',function(){
            $.getJSON('http://www.xiongmaoyouxuan.com/api/sub_column/7/items?',resData=>{
                console.log(resData);
                const products = resData.data.list
                const html2 = template('list',{products:products})
                $('.list>ul').html(html2)
                $('.innerBanner').css('display','none')
                $('.title-bar').css('background-color','#fef9dd')
                $('.title-bar').html('9块9包邮专区')
            })
        })
        // http://www.xiongmaoyouxuan.com/api/sub_column/174/items?
        $('.tabs>li:nth-child(3)').on('click',function(){
            $.getJSON('http://www.xiongmaoyouxuan.com/api/sub_column/174/items?',resData=>{
                const products = resData.data.list
                const html2 = template('list',{products:products})
                $('.list>ul').html(html2)
                $('.innerBanner').css('display','none')
                $('.title-bar').css('background-color','#fef9dd')
                $('.title-bar').html('超值大额劵')
            })
        })
        // http://www.xiongmaoyouxuan.com/api/column/3183/items?
        $('.tabs>li:nth-child(4)').on('click',function(){
            $.getJSON('http://www.xiongmaoyouxuan.com/api/column/3183/items?',resData=>{
                const products = resData.data.list
                const html2 = template('list',{products:products})
                $('.list>ul').html(html2)
                $('.innerBanner').css('display','none')
                $('.title-bar').css('background-color','#fef9dd')
                $('.title-bar').html('夏季女装上新')
            })
        })
        $('.tabs>li:nth-child(1)').on('click',function(){
            $.getJSON('http://www.xiongmaoyouxuan.com/api/tab/1?',resData=>{
            console.log(resData);
            const products = resData.data.items.list
            const html2 = template('list',{products:products})
            $('.list>ul').html(html2)
            $('.innerBanner').css('display','flex')
            $('.title-bar').css('background-color','#fff')
            $('.title-bar').html('小编精选')
            

            })
        })
        $('.more').on('click',function(){
            index+=20
            $.getJSON(`http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=${index}&sort=0`,resData=>{
                const products = resData.data.list
                const html2 = template('list',{products:products})
                $('.list>ul').append(html2)
            })
            console.log(`http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=${index}&sort=0`);
        })



        // 五、添加到购物车--事件委派
        $('.list').on('click','.add-to-cart',function(e){
            // console.log('加入购物车');
            const $li = $(e.target).parents('.item')
            // 构建当前商品对象
            const curr = {
                id: $li.data('id'),
                title: $li.find('.title').html(),
                price: $li.find('.price').html(),
                image: $li.find('.image').attr('src'),
                num: 1,
                couponValue: $li.find('.couponValue').html(),
            }
            console.log(curr);
            $.cookie.json = true
              // 将数据保存到cookie中
            // $.cookie('cart',JSON.stringify([curr]));
            const cart = JSON.parse($.cookie('cart')) || []
            // console.log('购物车',cart)
            // 判断cookie中是否已经存在数据
            // 返回的是满足return后面语句的元素下标，如果为-1表示不满足
            // let _cart = cart
            const index = cart.findIndex(prod => prod.id === curr.id)
            // console.log('666',index);
            if(index !==-1){
                // console.log(cart[index].num);
                cart[index].num += 1
            }else{
                // console.log('888',cart);
                cart.push(curr)
            }
            // console.log(cart);
            $.cookie('cart',JSON.stringify(cart),{expire:10})

            // 添加抛物线效果
            const {top, left} = $('.cart').offset()
            $(`<img src="${curr.image}" style="width: 32px; height: 32px; z-index: 999"/>`).fly({
                start: {
                top: e.clientY,
                left: e.clientX
                },
                end: {
                left,
                top: top - $(document).scrollTop(),
                width: 10,
                height: 10
                },
                onEnd() {
                this.destroy()
                }
            })
            
        })


        // 六、详情页面
        $('.list').on('click','.image',e=>{
            // 拿到li
            console.log(e.target);
            // 拿到li
            const $li = $(e.target).parents('.item')
            // 拿到id
            const id = $li.data('id')
            console.log(id);

            $.cookie('id',JSON.stringify(id),{expire:60})
            
        })

    })
})
